<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>采购单{{applytype==2?'物料入库':'教具入库'}}</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="tab-body mb-10">
          <!--        // status 	整型 	必填 	1 	- 	状态 待审批 已审批（未下单 已下单 已入库） 驳回-->
          <!--        // 0待审核 1通过 2驳回 3未入库 4已入库-->
          <el-radio-group v-model="searchData.status" size="small" @change="changeFn()">
            <el-radio-button :label="3">未入库({{ number ? number[3] : 0 }})</el-radio-button>
            <el-radio-button :label="4">已入库({{ number ? number[4] : 0 }})</el-radio-button>
          </el-radio-group>
        </div>
        <div class="hearder-search mb-10">
          <el-input v-model="searchData.name" placeholder="名称" size="small"
                    class="w-200 mr-10"></el-input>
          <!--时间判断区间-->
          <!--            <el-date-picker-->
          <!--                v-model="value1"-->
          <!--                type="daterange"-->
          <!--                range-separator="至"-->
          <!--                start-placeholder="开始日期"-->
          <!--                end-placeholder="结束日期"-->
          <!--                format="yyyy-MM-dd"-->
          <!--                value-format="yyyy-MM-dd"-->
          <!--                size="small"-->
          <!--                :picker-options="pickerOptions1"-->
          <!--                class="mr-10">-->
          <!--            </el-date-picker>-->
          <!--            <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>-->
          <el-button type="primary" size="small" @click="searchBtn('search')"><i class="el-icon-search"></i>搜索
          </el-button>
          <el-button size="small" @click="searchBtn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>

        </div>
        <!--本体列表，数据 -->
        <div class="applyBox" v-if="searchData.status==3">
          <span class="titlebook">请勾选入库物件：</span><span class="applycart" @click="showOrderList"><i
            class="iconfont icontushu"></i><span>共{{ applyBookBoxNumber.length }}件,点击查看</span></span>
        </div>
        <!--本体列表，数据 -->
        <div class="table-body">
          <div class="table-body-box">
            <!--              @selection-change="handleSelectionChange"-->
            <el-table
                ref="multipleTable"
                :data="arryList"
                :stripe="tableStyle.tableStripe"
                :border="tableStyle.tableBorder"
                tooltip-effect="dark"
                header-cell-class-name="table-text-c"
                style="width: 100%"
                :height="tableHeight"
                @select-all="selectAll"
                @select="selectFnBox">
              <el-table-column
                  type="selection"
                  width="50"
                  align="center"
                  :key="1"
                  v-if="searchData.status==3">
              </el-table-column>
              <el-table-column
                  prop="name"
                  :label="Number(searchData.type)==0?'物料名称':'教具名称'"
                  width="120"
                  align="center"
                  :ksy="2">
              </el-table-column>
              <el-table-column
                  prop="need_number"
                  label="数量"
                  align="center"
                  :key="3">
              </el-table-column>
              <el-table-column
                  label="金额"
                  align="center"
                  prop="price"
                  :key="4">
              </el-table-column>
              <el-table-column
                  prop="expect_time"
                  label="期望交付日期"
                  align="center"
                  :key="5">
              </el-table-column>
              <el-table-column
                  label="申请人"
                  align="center"
                  :key="6">
                <template slot-scope="scope">
                  {{ scope.row.user ? scope.row.user.realname : '--' }}
                </template>
              </el-table-column>
              <el-table-column
                  prop="create_time"
                  label="申请时间"
                  align="center"
                  :key="7">
              </el-table-column>
              <el-table-column
                  prop="url"
                  label="采购网址"
                  align="center"
                  :key="8">
              </el-table-column>
              <el-table-column
                  label="申购照"
                  align="center"
                  :key="9">
                <template slot-scope="scope">
                  <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
                </template>
              </el-table-column>
              <el-table-column
                  label="入库照"
                  align="center"
                  v-if="searchData.status==4"
                  :key="11">
                <template slot-scope="scope">
                  <ImagePreview :src="scope.row.put_pic" width="40px" height="40px"></ImagePreview>
                </template>
              </el-table-column>
              <el-table-column
                  prop="status"
                  label="状态"
                  align="center"
                  :key="10">
                <template slot-scope="scope">
                  <!--                                  0待审核1通过2驳回3完成-->
                  <el-popover
                      placement="left-start"
                      title="下单详情"
                      width="250"
                      trigger="hover"
                      >
                    <div class="tableline">
                      <div class="list">
                        <p>下单时间：<i style="color: green">{{ scope.row.pay_time }}</i></p>
                      </div>
                      <div class="list"v-if="searchData.status==4">
                        <p>入库时间：<i style="color: green">{{ scope.row.pay_time }}</i></p>
                      </div>
                    </div>
                    <span slot="reference" class="tablelineBtn">{{ searchData.status == 3 ? '未入库' : '已入库' }}</span>
                  </el-popover>
<!--                  <span class="tablelineBtn" v-else>{{ searchData.status == 3 ? '未入库' : '已入库' }}</span>-->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!--工具条 分页-->
        <el-col :span="24" class="toolbar">
          <el-pagination
              background
              :page-size="page.pagesize"
              :current-page="page.pageindex"
              layout="total, prev, pager, next"
              :total="page.total"
              @current-change="handleSizeChange"></el-pagination>
        </el-col>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">确定</el-button>
      </div>
    </div>
    <!--    orderType 1 下单 2 入库-->
    <addOrder :visible.sync="orderVisible" :applyBookBox="applyBookBox" :applyBookBoxNumber="applyBookBoxNumber"
              @clearList="clearList" :orderType="applytype" @getNewList="getNewList"></addOrder>
  </div>
</template>

<script>
import {pagination, yearDay, tableoption} from '@/utils/util.js'
import addOrder from "../purchase/addOrder";
// applytype 2 物料入库 3 教具入库
export default {
  props: ['visible', 'applytype'],
  components: {addOrder},
  data() {
    return {
      orderVisible: false,
      dialogVisible: false,
      tableHeight: 0,
      yeartimeFn: yearDay,
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      searchWord: '',
      tableStyle: tableoption,
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      ListId: this.$route.query,
      numberValue: '',
      numberList: [
        {
          name: '全部',
          id: ''
        },
        {
          name: '领用数量正序',
          id: 1
        },
        {
          name: '领用数量倒序',
          id: 2
        }
      ],
      value1: [],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      searchData: {
        name: '',
        user_name: '',
        start_time: '',
        end_time: '',
        status: '3', // 0待审核 1通过 2驳回 3未入库 4已入库
        type: '0', // 0 物料 1 教具
        p: 1
      },
      count_number: 0,
      number: null,
      statusList: {
        0: '待审批',
        1: '未下单',
        2: '驳回申请',
        3: '未入库',
        4: '已入库'
      },
      multipleSelection: [],
      applyBookBox: {},
      applyBookBoxNumber: [],
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        // applytype 1 物料 2教具
        this.searchData.type = Number(this.applytype)===2?'0':'1'
        let n = this;
        this.$nextTick(() => {
          let height = n.$refs.dialogBox.offsetHeight;  //top 50 1 search 50 page 50 10 footer 50 1
          this.tableHeight = height - (51 + 20 + 42 + 42 + 42 + 50 + 51)
        })
        this.InitFn()
      } else {
        this.arryList = [];
        this.searchData.status = 3;
      }
    }
  },
  created() {
  },
  methods: {
    changeFn() {
      if (this.searchData.status === 3) {
        this.tableHeight = this.tableHeight - 42;
      } else {
        this.tableHeight = this.tableHeight + 42;
      }
      this.InitFn()
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 初始化
    async InitFn() {
      this.searchData.p = this.page.pageindex;
      let data = await this.$fetch(this.api.purchase.list, this.searchData);
      if (!data.code) {
        let array_ = []
        for (let i in data.list.data) {
          data.list.data.warehouse_id = 0
          data.list.data[i].create_time = data.list.data[i].create_time.split(' ')[0]
          array_.push(data.list.data[i])
        }
        this.arryList = array_;
        this.page.total = data.list.total;
        this.number = data.number
      } else {
      }
    },
    // 搜索组件
    searchFn(option) {
      this.page.pageindex = 1
      this.searchForm = option
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    showOrderList() {
      if (JSON.stringify(this.applyBookBox) === '{}') {
        this.$message.error('请选择需要入库的物件')
        return
      }
      this.orderVisible = true;
    },
    searchBtn(option) {
      if (option === 'search') {
        if (this.value1 && this.value1.length) {
          this.searchData.start_time = this.value1[0];
          this.searchData.end_time = this.value1[1];
        } else {
          this.searchData.start_time = '';
          this.searchData.end_time = '';
        }
      } else {
        this.value1 = [];
        this.page.pageindex = 1;
        this.searchData.start_time = '';
        this.searchData.end_time = '';
        this.searchData.name = '';
      }
      this.InitFn()
    },
    // 点击全选
    selectAll(val) {
      // 全选所有跟空值，即使页面已经选择2项
      console.log('点击全选', val)
      console.log(val) // 所有选中值
      let applyBookBox = this.applyBookBox
      if (val.length !== 0) {
        // this.handleSelection = val
        for (let i = 0; i < val.length; i++) {
          if (!applyBookBox[val[i].id]) {
            // 不存在图书
            applyBookBox[val[i].id] = val[i]
          }
        }
      } else {
        // 清除所有 arryList
        for (let i = 0; i < this.arryList.length; i++) {
          if (this.applyBookBox[this.arryList[i].id]) {
            // 存在图书删除
            delete applyBookBox[this.arryList[i].id]
          }
        }
      }
      this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      this.applyBookBoxNumber = Object.keys(this.applyBookBox)
      console.log('最后的数据：', this.applyBookBox, this.applyBookBoxNumber)
    },
    // 点击单选
    selectFnBox(val) {
      // 选择的是当前所有的选中，还需要比对未选中项 applyBookBoxInit
      console.log('本页面的列表数据', this.applyBookBoxInit)
      console.log('点击单选', val)
      let applyBookBox = this.getJson(this.applyBookBox)
      if (val.length !== 0) {
        // 有选项 对本页面的选项进行比对
        let valBox = {}
        for (let i = 0; i < val.length; i++) {
          valBox[val[i].id] = val[i]
        }
        for (let item of this.arryList) {
          if (valBox[item.id]) {
            // 存在图书删除
            applyBookBox[item.id] = item
          } else {
            delete applyBookBox[item.id]
          }
        }
      } else {
        // 清除所有 arryList本页面的数据
        for (let item of this.arryList) {
          delete applyBookBox[item.id]
        }
      }
      this.applyBookBox = this.getJson(applyBookBox)
      this.applyBookBox = Object.assign({}, this.applyBookBox) // 更新视图对象
      this.applyBookBoxNumber = Object.keys(this.applyBookBox)
    },
    clearList(option) {
      if (option.type === 'clear') {
        this.applyBookBox = {};
        this.applyBookBoxNumber = [];
        this.checked()
      } else if (option.type === 'delete') {
        this.applyBookBoxNumber.splice(this.applyBookBoxNumber.indexOf(option.index), 1)
        delete this.applyBookBox[option.index]
        this.checked()
      } else if (option.type === 'pay') {
        this.applyBookBox = {}
        this.applyBookBoxNumber = []
        this.InitFn()
      }
    },
    checked() {
      for (let i = 0; i < this.arryList.length; i++) {
        if (this.applyBookBox[this.arryList[i].id]) {
          this.$refs.multipleTable.toggleRowSelection(this.arryList[i], true)
        } else {
          this.$refs.multipleTable.toggleRowSelection(this.arryList[i], false)
        }
      }
    },
    getNewList(){
      this.$emit('InitFn')
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 84%;
  height: 75%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.hearder-search {
  display: flex;
  align-items: center;
}.examinBtn i {
   font-style: normal;
   color: #1b8de5;
   cursor: pointer;
   font-size: 12px;
 }

.tableline .list i {
  font-style: normal;
}
.examinBtn i {
  font-style: normal;
  color: #1b8de5;
  cursor: pointer;
  font-size: 12px;
}

.tableline .list i {
  font-style: normal;
}
</style>


